/*
  date:2021/07/11
  author:chenjunjie
*/
/* 固定导航开始 */
.go {
    position: fixed;
    top: 5%;
    right: 5%;
    z-index: 999;
}

/* 固定导航结束 */


/* 第一屏开始*/
.section1 {
    /* 写background的时候，先写颜色再写属性比较规范 */
    position: relative;
    background: #fadd67 url(/images/t1fpyqfltdxxaiulhh-990-600.png) no-repeat center bottom;
}

.fly {
    position: absolute;
    right: 20%;
    top: 10%;
}

.short01 {
    position: absolute;
    left: 50%;
    margin-left: -200px;
    bottom: 335px;
}

.goods {
    position: absolute;
    left: 50%;
    margin-left: -400px;
    bottom: 150px;
}
/* 第一屏结束 */


/* 第二屏开始 */
.section2 {
    /* 写background的时候，先写颜色再写属性比较规范 */
    background: #84a2d4 url(/images/t1zdgpfi8exxca6rfn-2000-600.png) no-repeat center bottom;
    z-index: 2;
}

.computer {
    width: 990px;
    height: 500px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.search {
    width: 222px;
    height: 45px;
    background: url(/images/search.png) no-repeat;
    position: absolute;
    right: -30px;
    bottom: 300px;
    display: none;
}

.search-word {
    position: absolute;
    right: 32px;
    top: 5px;
    opacity: 0; /* 做淡入淡出效果 */
}

.search-02-1 {
    position: absolute;
    right: 375px;
    bottom: 300px;
    display: none;
}

.goods-02 {
    position: absolute;
    height: 100px;
    bottom: 217px;
    right: 270px;
    display: none;
}

.words-01,.words-02{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 550px;
}

.words-02 {
    opacity: 0;
}

.shirt-02 {
    position: absolute;
    bottom: 345px;
    left: 395px;
    width: 100px;
    display: none;
}

.cover {
    position: absolute;
    bottom: 334px;
    right: 502px;
    width: 105px;
    height: 90px;
    z-index: 5;
    background: #fff;
    display: none;
}
/* 第二屏结束 */


/* 第三屏开始 */
.section3 {
    background: #ef674d;
}
.main {
    position: absolute;
    width: 700px;
    height: 500px;
    background: url(/images/main.png) no-repeat center center;
    left: 50%;
    transform: translateX(-50%);
    bottom: 50px;
}
.select {
    width: 300px;
    height: 250px;
    position: absolute;
    bottom: 0;
    right: 8px;
}
.img {
    position: absolute;
    bottom: 100px;
}
.img-01-a {
    opacity: 0;
}
.btn {
    position: absolute;
    bottom: 10px;
}
.btn-01-a {
    opacity: 0;
}
.shirt-03 {
    position: absolute;
    left: 115px;
    bottom: 200px;
    display: none;
}
.t1f {
    position: absolute;
    left: 115px;
    bottom: 200px;
    display: none;
}
/* 第三屏结束 */

/* 第四屏开始 */
.section4 {
    background: #fed url(/images/t1iresfnxaxxca6rfn-2000-600.png) no-repeat center bottom;
    z-index: -1;
}
.cloud {
    position: absolute;
    left: 50%;
    bottom: 550px;
}
.word {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    bottom: 500px;
}
.words-04-a {
    opacity: 0;
}
.car {
    width: 500px;
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translatesX(-50%);
    -o-transform: translateX(-50%);
}
.car-img {
    position: absolute;
    bottom: 200px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    z-index: -1;
    display: none;
}
/* 第四屏结束 */

/* 第五屏开始 */
.section5 {
    background: #fed url(/images/t1yisqfa4exxa3gmkg-2000-1500.png);
}
/* 第五屏结束 */

/* 第六屏开始 */
.section6 {
    background: #fed url(/images/t1dvj.fn0gxxb0_fua-2500-600.png) no-repeat 25% 100%;
}
/* 第六屏结束 */

/* 第七屏开始 */
.section7 {
    background: #fed url(/images/t1wf1tfctaxxa3gmkg-2000-1500.png) no-repeat 50% 100%;
}
/* 第七屏结束 */

/* 第八屏开始 */
.section8 {
    background: #fed url(/images/ksgw.png);
}
/* 第八屏结束 */


/* 动画组 */
.fly {
    animation: fly 3s linear infinite;
}
.short01 {
    animation: short01 3s linear infinite;
}
@keyframes fly {
    50% {
        top: 25%;
    }

    100% {
        top: 10%;
    }
}

@keyframes short01 {
    50% {
        bottom: 395px;
    }

    100% {
        bottom: 335px;
    }
}

/* 云彩第一组 */
.cloud-back1 {
    animation: cloud 60s linear infinite;
}

@keyframes cloud {
    50% {
        left: -10%;
    }
    100$ {
        left: 50%
    }
}